<template>
  <div style="display: flex">
    <div style="flex: 1"/>
    <el-tooltip
        class="item"
        effect="dark"
        content="提示：头像是人脸识别重要元素，请上传清晰面部头像"
        placement="bottom"
    >
      <el-avatar shape="square" :size="150">
        <el-upload ref="upload" :action="fileUploadUrl"
                   :on-success="filesUploadSuccess">
          <img :src="portrait" alt="点击上传头像" style="height: 150px; width: 150px;"/>
        </el-upload>
      </el-avatar>
    </el-tooltip>

    <div style="flex: 1"/>
  </div>
  <el-descriptions
      class="margin-top"
      title="个人信息"
      :column="1"
      direction="horizontal"
  >

    <el-descriptions-item label="姓名：">{{ form.name }}</el-descriptions-item>
    <el-descriptions-item label="昵称：">{{ form.username }}</el-descriptions-item>
    <el-descriptions-item label="密码：">{{ form.password }}</el-descriptions-item>
    <el-descriptions-item label="生日：">{{ form.birth }}</el-descriptions-item>
    <el-descriptions-item label="性别：">{{ form.sex }}</el-descriptions-item>

    <el-descriptions-item label="入学日期：" v-if="this.role === '学生'">{{ form.schoolDate }}</el-descriptions-item>
    <el-descriptions-item label="班级编号：" v-if="role === '学生'">{{ classform.className }}({{ classform.classNickname }})
    </el-descriptions-item>

    <el-descriptions-item label="电话号码：" v-if="this.role === '教师'">{{ form.phoneNumber }}</el-descriptions-item>
    <el-descriptions-item label="学历：" v-if="this.role === '教师'">{{ form.degree }}</el-descriptions-item>
    <el-descriptions-item label="入职日期：" v-if="this.role === '教师'">{{ form.entryDate }}</el-descriptions-item>
    <el-descriptions-item label="住址：" v-if="this.role === '教师'">{{ form.address }}</el-descriptions-item>

  </el-descriptions>
  <el-button type="info" plain @click="register()">编辑</el-button>
  <el-button type="info" plain @click="centerDialogVisible = true" v-show="role === '学生'">
    查看监护人信息
  </el-button>
  <el-button type="info" plain @click="clock" v-show="this.role === '教师'">打卡</el-button>
  <el-button type="info" plain @click="centerDialogVisible2 = true">
    注销账户
  </el-button>
  <el-dialog v-model="centerDialogVisible" title="家长信息" center>
    <Family/>
  </el-dialog>


  <el-dialog v-model="centerDialogVisible2" title="警告" width="30%" center>
    <span>您现在正在注销账户，请再次确认!</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="undel">取消</el-button>
        <el-button type="danger" @click="yes(this.form.id)">确认</el-button>
      </span>
    </template>
  </el-dialog>

<!--  <el-dialog v-model="changHead" title="更换头像" width="30%" center>-->
<!--    <span>请选择：拍照上传 / 相册上传</span>-->
<!--    <template #footer>-->
<!--      <el-button disabled>拍照上传</el-button>-->
<!--      <el-button><Avatar/></el-button>-->
<!--    </template>-->
<!--  </el-dialog>-->
</template>

<script>
import Family from "@/components/Family";
import {defineComponent, ref, toRefs} from 'vue';
import {ElMessage} from 'element-plus'
import {delUser, getClass, saveHead2} from "@/utils/api";

export default defineComponent({
  name: "Oneself",
  components: { Family},
  data() {
    return {
      form: {},
      classform: {},
      portrait: "",
      fileUploadUrl: '/api/files/upload',
    }
  },
  setup() {
    return {
      centerDialogVisible: ref(false),
      centerDialogVisible2: ref(false),
      changHead: ref(false),
      // ...toRefs(state), 此处加上就弹不出“个人信息”页面，留个提醒
    }
  },
  created() {
    // form获取sesion信息，role获取当前登陆的角色
    this.form = JSON.parse(sessionStorage.getItem("1"))
    this.portrait = this.form.portrait
    this.role = sessionStorage.getItem("2")
    // 结合上面的v-if判断，老师登陆和学生登陆显示的个人信息会有差别
    getClass(this.form.classId).then(res => {
      this.classform = res.data
    })
  },
  methods: {
    // 编辑按钮：往session里添加一个新的标识，并跳转到注册页面
    register() {
      sessionStorage.setItem('3', 'edit')
      this.$router.push({path: "/Register"})
    },
    // 打卡按钮：跳转到人脸打卡页面
    clock() {
      this.$router.push({path: '/face'})
    },
    // 注销确认按钮：根据session表示判断当前是何角色，然后根据id删除数据库信息
    yes(id) {
      switch (this.role){
        case "学生" :
          delUser("stu",id)
          break
        case "教师" :
          delUser("ter",id)
          break
      }
      // 删除数据库信息后删除浏览器当前session，并刷新回到为登陆页面
      sessionStorage.removeItem("1")
      sessionStorage.removeItem("2")
      this.centerDialogVisible2 = false
      ElMessage.success('注销成功，再见！')
      // 刷新
      this.$router.push({path:"/main"})
    },
    // 取消注销按钮
    undel() {
      this.centerDialogVisible2 = false
    },
    // 换头像
    filesUploadSuccess(res) {
      switch (this.role){
        case "学生" :
          this.rou = "stu/"
          break
        case "教师" :
          this.rou = "ter/"
          break
      }
      let path = String(res.data).replaceAll("http://localhost:9090","。").replaceAll("/","，")
      saveHead2(this.rou, this.form.id, path).then(res => {
        this.form.portrait = res.data,
            sessionStorage.setItem("1",JSON.stringify(this.form)),
            ElMessage.success("上传成功")
      })
      this.$nextTick(() => {
        this.portrait = res.data
      });
    },
  }
})

</script>

<style scoped>

</style>